<template>
	<view class="content">
		<view class="topLogo">
			<image src="https://mp-6f81e20c-45ed-420c-8b9c-c84e21bce18b.cdn.bspapp.com/icon/logo.png" mode="aspectFit" class="logoImg">
			</image>
			
		</view>
		<view class="block">
			日记
		</view>
		<view class="vessel">
			<input class="uni-input" 
				:placeholder="emailOrUserName" 
				@value="username" 
				@blur="getUserName" 
				:value="username"/>
			<input class="uni-input" placeholder="密码" type="password" @value="password" @blur="getPassWord" :password="password"/>
		</view>
		<view class="block">
			
		</view>
		<view class="vessel">
			<button class="login" type="primary" @click="login()">登录</button>
			<button class="register" @click="toRegister()">注册</button>
			<view class="forgetPwd" >
				<text @click="toForGetPwd">忘记密码 </text>
				<text @click="switchInput" style="margin-left: 4vh">{{switchLogin}}</text>
			</view>
			
		</view>
		<view class="block">
			
		</view>
		<view class="agreement">
			点击登录即表示已阅读并同意《用户协议》和《隐私协议》
		</view>
		
		<view>
			<!-- 提示窗示例 -->
			<uni-popup ref="alertDialog" type="dialog">
				<uni-popup-dialog 
					type="error" 
					cancelText="关闭" 
					confirmText="同意" 
					title="登录失败" 
					content="用户名或密码错误,请重新登录" 
					@confirm="dialogConfirm"
					@close="dialogClose">
				</uni-popup-dialog>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import {userLogin,getIdByToken} from '@/api/user.js';
	export default {
		data() {
			return {
				username:"",
				password:"",
				email:"",
				emailOrUserName:"账号",
				switchLogin:"邮箱登录",
			};
		},
		onLoad() {
			this.username = uni.getStorageSync("username")
			this.isLogin()
		},
		methods:{
			switchInput(){
				if(this.switchLogin == '邮箱登录'){
					this.switchLogin = "账号登录"
					this.emailOrUserName = "邮箱"
				}else{
					this.switchLogin = '邮箱登录'
					this.emailOrUserName = "账号"
				}
			},
			isLogin(){
				const token = uni.getStorageSync('authorization')
				
				if(token){
					// 获取上一次关闭小程序的时间
					let lastCloseTime = uni.getStorageSync('lastCloseTime') || 0;
					let currentTime = +new Date(); // 当前时间
					// 检查时间间隔是否超过了30天
					if (currentTime - lastCloseTime >= 43200 * 1000*24*30) {
						// 超过了30天，执行清除操作
						uni.clearStorageSync();
						console.log('数据清除成功');
					}
					// 保存当前关闭小程序的时间
					uni.setStorageSync('lastCloseTime', currentTime);
					//通过token获取id
					getIdByToken({"token":token}).then(res=>{
						console.log(res)
						uni.setStorageSync('id', res.data.data);
						uni.navigateTo({
							url:"/pages/index/index?id="+res.data.data
						})
					})
					
				}
			},
			login(){
				console.log(this.emailOrUserName)
				if(this.emailOrUserName == "邮箱"){
					this.email = this.username;
					this.username = "";
				}else if(this.emailOrUserName == "账号"){
					this.email = "";
				}
				const data = {
					"username":this.username,
					"password":this.password,
					"email":this.email
					}
				console.log("账号:"+this.username+"，密码:"+this.password)
				userLogin(data).then(res=>{
						
						// 登录失败
						if(res.data.code!=200){
							this.dialogToggle()
						}else{
							console.log(res)
							uni.setStorageSync('lastCloseTime', new Date());
							uni.setStorageSync('authorization', res.data.data.token);
					
							const value = uni.getStorageSync('authorization');
							if (value) {
								console.log(value);
							}
							uni.setStorageSync('id', res.data.data.id);
							
							uni.navigateTo({
								url:"/pages/index/index?id="+res.data.data.id
							})
						}
					})
			},
			getUserName(event){
				this.username = event.detail.value
			},
			getPassWord(event){
				this.password = event.detail.value
			},
			toRegister(){
				uni.navigateTo({
					url:"/pages/user/register"
				})
			},
			toForGetPwd(){
				uni.navigateTo({
					url:"/pages/user/forgetPwd"
				})
			},
			dialogToggle() {
				this.$refs.alertDialog.open()
			},
		}
	}
</script>

<style lang="scss">
	page{
		background-color: $bg-blue;
	}
	.content{
		.topLogo{
			width: 100%;
			height: 35vh;
			position: relative;
			.logoImg{
				width: 15vh;
				height: 15vh	;
				position: absolute;  /* 让图片绝对定位 */  
				bottom: 0;  /* 将图片定位到 `.topLogo` 的底部 */  
				left: 50%;  /* 将图片在水平方向上居中 */  
				transform: translateX(-50%);  /* 在水平方向上移动图片，使其完全居中 */ 
				opacity: 0.7;
			}
		}
		.block{
			width: 100%;
			height: 7vh;
			text-align: center;
			font-size: 2.4vh;
			color: white;
		}
		.vessel{
			width: 100%;
			height: 14vh;
			
			.uni-input{
				color:black;
				background-color: white;
				width: 70%;
				height: 5vh;
				border-radius: 7rpx;
				margin: auto;
				margin-bottom: 10rpx;
				text-align: center;
				// color: $bg-gary;
			}
			button{
				width: 70%;
				height: 4vh;
				margin-bottom: 10rpx;
				font-size: 1.5vh;
			}
			.register{
				color: $font-blue;
			}
			.forgetPwd{
				width: 100%;
				text-align: center;
				color: white;
			}
			
		}
		.agreement{
			
			font-size: 1.2vh;
			text-align: center;
			color: white;
		}
		
	}
</style>
